<template>
  <div class="bg">
    <div class="login">
      <Input
        @on-enter="login"
        class="myinput"
        autofocus
        v-model.trim="username"
        prefix="ios-contact"
        style="width:80%;"
        clearable
        placeholder="账号"
      />
      <Input
        @on-enter="login"
        type="password"
        class="myinput"
        v-model.trim="password"
        prefix="md-lock"
        clearable
        placeholder="密码"
        style="width:80%;"
      />
      <Button type="primary" @click="login" style="width:80%;margin-top:30px;">登录</Button>
      <Button type="primary" to="/reg" ghost style="width:80%;margin-top:10px;">注册</Button>
    </div>
    <div class="copyright">&copy;Simba</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      if (this.username && this.password) {
        this.$service.account
          .login({ nickname: this.username, password: this.password })
          .then(res => {
            if (res.data.success) {
              this.$store.commit("user/setUserInfo", {
                nickname: this.username
              });

              this.$Message.success({
                content: "登录成功",
                onClose: () => {
                  this.$router.push("/student/classlist");
                }
              });
            } else this.$Message.error("登录失败，用户名或密码错误");
          });
      } else {
        this.$Message.warning("请输入用户名或密码");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.bg {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, skyblue, #fff);
  .login {
    padding-top: 30px;
    margin-top: -100px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #ccc;
    border: 1px solid #eee;
    background: #fff;
    width: 400px;
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .myinput {
      margin: 10px;
    }
  }

  .copyright {
    font-size: 14px;
    width: 100px;
    text-align: center;
    position: absolute;
    left: calc(50% - 50px);
    bottom: 50px;
  }
}
</style>
